<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:metadata>
        <f:event
                listener="#{adviceHome.initConversation()}"
                type="preRenderView"
        ></f:event>
    </f:metadata>
    <h:head>
        <style>
            body{
                background: url(#{resource['images/advice/body_bg.png']}) 0 0 no-repeat;
            }
            .panel{
                background: url(#{resource['images/advice/nr_bg.png']}) no-repeat;

                margin: 0px auto;
                width: 1200px;
                height: 900px;
            }
            .template{
                color: #f4221c;
                font-size: 10px;
            }
            .ui-outputlabel-rfi{
                color: #f4221c;
            }
            .content{
                position: relative;
                top: 260px;
                left: 300px;
            }
        </style>
        <script>
            $(function () {
                setTimeout(function() {
                    $('.ui-messages').slideUp();
                }, 5000);
            });
        </script>
    </h:head>
    <h:body>
        <h:form id="editForm">
            <p:messages id="messages" ><p:autoUpdate/></p:messages>
            <div class="panel">
                <div class="content">

                    <h:panelGrid
                            columns="2"
                            cellpadding="5"
                    >
                        <p:outputLabel
                                for="name"
                                value="我的姓名"
                        />
                        <p:inputText
                                id="name"
                                value="#{adviceHome.instance.name}"
                                styleClass="input-small"
                        />

                        <p:outputLabel
                                for="phone"
                                value="联系电话"
                        />
                        <p:inputText
                                id="phone"
                                value="#{adviceHome.instance.phone}"
                                styleClass="input-small"
                        />
                        <p:outputLabel for="email" value="电子邮箱" />
                        <p:inputText id="email"
                                     value="#{adviceHome.instance.email}">
                        </p:inputText>

                        <p:outputLabel for="title" value="标题" />
                        <p:inputText id="title"
                                     required="true"
                                     maxlength="100"
                                     style="width: 430px"
                                     value="#{adviceHome.instance.title}">
                        </p:inputText>

                        <p:outputLabel for="content" value="建议内容" />
                        <h:outputLabel>
                        <p:inputTextarea id="content"
                                         required="true"
                                         maxlength="1000"
                                         counter="display"
                                         autoResize="false"
                                         rows="8"
                                         cols="40"
                                         counterTemplate="还能输入{0}个字 。"
                                         value="#{adviceHome.instance.content}">
                        </p:inputTextarea>
                        <h:outputText id="display" class="p-d-block template"/>
                    </h:outputLabel>
                    </h:panelGrid>
                    <p style="color:red;font-size: 16px;margin-left:6em; ">注：为更好落实您的意见建议，请尽量留下准确完整的个人信息。</p>
                    <br/>
                    <br/>
                   <div style="margin: 0px auto">
                       <p:commandButton action="#{adviceHome.saveAndFlush()}" value="提交" ajax="false" style="margin-left: 200px">
                       </p:commandButton>
                       <p:commandButton value="重置" immediate="true" style="margin-left: 60px">
                           <p:ajax update="editForm" resetValues="true" />
                       </p:commandButton>
                   </div>

                </div>

            </div>

        </h:form>

    </h:body>
</html>